<?php
require_once('../controller/auth.php');
//Start session
	session_start();
	
	//Include database connection details
	require_once('../controller/inc/config.inc');
	
	//Array to store validation errors
	$errmsg_arr = array();
	
	//Validation error flag
	$errflag = false;
	
	//Connect to mysql server
	$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
	if(!$link) {
		die('Failed to connect to server: ' . mysql_error());
	}
	
	//Select database
	$db = mysql_select_db("ttc_teachers");
	if(!$db) {
		die("Unable to select database");
	}
	
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
<title>TMIS-Training Module</title>

<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<!-- Le styles -->
<link rel="stylesheet" href="../assets/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/font-awesome.css" type="text/css" />
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>

<script type="text/javascript" src="../assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap-popover.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="../assets/js/highcharts.js"></script>
<script src="../assets/js/exporting.js"></script>
<script>
$(function ()
{ 
$("input").popover({trigger: 'focus', 'placement':'right'});

$("textarea").popover({trigger: 'focus'});


$('#tab').tooltip({'placement':'right', 'trigger' : 'hover'});

$('a').tooltip({'placement':'bottom', 'trigger' : 'hover'});	
});
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#prov_select").change(function()
{
$('#gen_rep').hide();
var pro_name=$(this).val();
var dataString = 'pro_id='+ pro_name;

$.ajax
({
type: "POST",
url: "execute/list_ttc.php",
data: dataString,
cache: false,
success: function(html)
{
$(".ttc").html(html);
} 
});

});

});
</script>
<style>
body {
    padding-top: 60px;
    padding-bottom: 40px;
}

.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}
</style>
<!-- Le fav and touch icons -->
<script type='text/javascript'> 
$(document).ready(function(){ 
$("#tea_result").slideUp(); 
    $("#search_button").click(function(e){
        e.preventDefault(); 
        ajax_search(); 
        
    }); 
    

});
function ajax_search(){ 
  $("#tea_result").show(); 
  var key=$("#keyword").val();
  var field=t_field.options[t_field.options.selectedIndex].value;
  
  if(!key==null || !key==''){
  $.post("execute/search_teacher.php", {
  search_term : key,
  column: field}, function(data){
   if (data.length>0){ 
     $("#tea_result").html(data); 
   } 
  });
  }
  else {
  $("#tea_result").hide(); 
  }
}
</script>
</head>

<body>
<div class="container-fluid">
<!--TOp Nav-->
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
      <div class="container-fluid">
        <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a href="#" class="brand">TMIS | SMIS</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li><a href="../dashboard.php">Home</a></li>
            
            <li class="dropdown active">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">Colleges <b class="caret"></b></a>
              <ul class="dropdown-menu">
               
                <li><a href="ttc_info.php">TTC Information</a></li>
                <li><a href="#">TTC Teachers</a></li>
                <li><a href="#">Provinces</a></li>
              
              </ul>
            </li>
            
            
            <!--Students-->
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">Students <b class="caret"></b></a>
              <ul class="dropdown-menu">
              
                <li><a href="#">Students Information</a></li>
                <li><a href="#">Add Students</a></li>
                <li><a href="#">Modify Students</a></li>
                <li class="divider"></li>
                <li class="nav-header">Assign</li>
                <li><a href="#">Class</a></li>
                <li><a href="#">Department</a></li>
                <li class="divider"></li>
                
                <li><a href="#">Transfer In</a></li>
                <li><a href="#">Transfer Out</a></li>
                <li class="divider"></li>
                <li><a href="#">Reports</a></li>
                <li class="divider"></li>
                <li><a href="#">Setup</a></li>
                
              </ul>
            </li>
            <!--/Students-->
            
            <!--Grades-->
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">Grades <b class="caret"></b></a>
              <ul class="dropdown-menu">
              
                <li><a href="#">Transcripts</a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Setup</a></li>
                <li class="divider"></li>
               
                <li><a href="#">Utilities</a></li>
                
                
                
              </ul>
            </li>
            <!--/Grades-->
            
              <!--Attendance-->
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">Attendance <b class="caret"></b></a>
              <ul class="dropdown-menu">
              
                <li><a href="#">Administration</a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Setup</a></li>
                <li class="divider"></li>
               
                <li><a href="#">Utilities</a></li>
                
                
                
              </ul>
            </li>
            <!--/Attendance-->
            
            <!--User-->
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">User <b class="caret"></b></a>
              <ul class="dropdown-menu">
              
                <li><a href="#">User Info</a></li>
                <li><a href="#">Add a User</a></li>
                <li><a href="#">Preferences</a></li>
                <li class="divider"></li>
               
                <li><a href="#">Setup</a></li>
                
                
                
              </ul>
            </li>
            <!--/User-->
               <!--Tools-->
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">Tools <b class="caret"></b></a>
              <ul class="dropdown-menu">
              
                <li><a href="#">Access Log</a></li>
                <li><a href="#">Delete Log</a></li>
                <li><a href="#">Rollover</a></li>
                <li class="divider"></li>
               
                <li><a href="#">Backup Database</a></li>
                
                
                
              </ul>
            </li>
            <!--/User-->
            
            
            
          </ul>
          <form action="" class="navbar-search pull-left">
            <input type="text" placeholder="Search" class="search-query span2">
          </form>
          <ul class="nav pull-right">
            
            
            <div class="pull-right">
                <ul class="nav pull-right">
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Welcome, <?php echo $_SESSION['SESS_FIRST_NAME'] . " " . $_SESSION['SESS_LAST_NAME'];?> <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="/user/preferences"><i class="icon-cog"></i> Preferences</a></li>
                            <li><a href="/help/support"><i class="icon-envelope"></i> Contact Support</a></li>
                            <li class="divider"></li>
                            <li><a href="controller/logout.php"><i class="icon-off"></i> Logout</a></li>
                        </ul>
                    </li>
                </ul>
              </div>
              
              
          </ul>
        </div><!-- /.nav-collapse -->
      </div>
  </div>
</div>








<script>
$(document).ready(function()
{
  //Handles menu drop down
  $('.dropdown-menu').find('form').click(function (e) {
        e.stopPropagation();
        });
  });
</script>

<script type = "text/javascript">
$(function() {
	//call the function onload
	getdata( 1 );
});

function getdata( pageno ){                     
	var targetURL = 'pagination/search_results.php?page=' + pageno;   

	$('#retrieved-data').html('<p><img src="../pagination/ajax-loader.gif" /></p>');        
	$('#retrieved-data').load( targetURL ).hide().fadeIn('slow');
}      
</script>

<!--/Top Nav-->
  <div class="row-fluid">
    
    <div class="span9">
	<!--Content-->


<h2>TTC Instructors Information</h2>
		<div id="tab" class="btn-group" data-toggle="buttons-radio">
		  <a href="#search" class="btn active btn-info" data-toggle="tab">Search Instructor</a>
		  <a href="#listall" class="btn btn-info" data-toggle="tab">List All Instructors</a>
		  <a href="#stat" class="btn btn-info" data-toggle="tab">Statistics and Numbers</a>
		  <a href="#charts" class="btn btn-info" data-toggle="tab">Charts</a>
		</div>
 
		<div class="tab-content">
		  <div class="tab-pane active" id="search">
		  <br/>
		  
		  <h3>Search Instructor</h3>
		  
		  <form class="form-inline">
		  		<select id="t_field" name="t_field">
		  		<option value="">Select a Field</option>
		  		<option value="NAME">Name</option>
		  		<option value="HR_LETTER_NUMBER">HR Letter Number</option>
		  		<option value="TEACHERS_ADMIN_LETTER">Instructor Affairs Letter Number</option>
		  		<option value="EDUCATION_LEVEL">Education Level</option>
		  		<option value="EDUCATION_FIELD">Education Field</option>
		  		<option value="GRADUATION_YEAR">Graduation Year</option>
		  		<option value="ACADEMIC_GRADE">Academic Grade</option>
		  		
		  		</select>
		  		
		  		<div class="input-append">
				  <input class="input-xlarge" id="keyword" type="text" placeholder="Your Keyword">
				  <button class="btn btn-primary" id="search_button"><i class='icon-search'></i>&nbsp;Search!</button>
				</div>
				
			  
			</form>
		  
		  <div id="tea_result"></div>
		  </div>
		  
		  <div class="tab-pane" id="listall">
		  <br/>
		 <script type='text/javascript'> 
			$(document).ready(function(){ 
			$("#filter_result").slideUp(); 
			    $("#filter_button").click(function(e){
			        e.preventDefault(); 
			        $('#showAll').show();
			        $('#retrieved-data').hide();
			        filter_search(); 
			        
			    }); 
			    
			    $('#showAll').click(function(){
			    $('#retrieved-data').slideDown();
			    $("#filter_result").slideUp();
			    $('#showAll').hide();
			    });
			    
			
			});
			function filter_search(){ 
			  $("#filter_result").show(); 
			  var f_key=$("#filter_keyword").val();
			  var fieldOne=f_field.options[f_field.options.selectedIndex].value;
			  var prov=p_field.options[p_field.options.selectedIndex].value;
			  if(!f_key==null || !f_key==''){
			  $.post("execute/filter_teacher.php", {
			  key_term : f_key,
			  column: fieldOne,
			  pro: prov}, function(data){
			   if (data.length>0){ 
			     $("#filter_result").html(data); 
			   } 
			  });
			  }
			  else {
			  $("#filter_result").hide();
			  
			  }
			}
			</script>
		  <h3>List All Instructors</h3>
		  
		   <div class="alert alert-error">
		   
		   <h4>Filter:</h4>
		   <form class="form-inline">
		   <select name="p_field" id="p_field">
		  		<option value="">Select Province</option>
		  		<?php
				  	mysql_query ('SET NAMES utf8');
				  	mysql_query('SET CHARACTER_SET utf8'); 
				  	$q=mysql_query("SELECT distinct PROVINCE FROM tblteachers order by PROVINCE");
				  	while($row=mysql_fetch_array($q)){
					  	echo "<option value='$row[PROVINCE]'>" . $row['PROVINCE'] . "</option>";
					  	
					  	}
				  	
				  	?>
		  		</select>
		  		
		  		<select name="f_field" id="f_field">
		  		<option value="">Select a Field</option>
		  		<option value="NAME">Name</option>
		  		<option value="HR_LETTER_NUMBER">HR Letter Number</option>
		  		<option value="TEACHERS_ADMIN_LETTER">Instructor Affairs Letter Number</option>
		  		<option value="EDUCATION_LEVEL">Education Level</option>
		  		<option value="EDUCATION_FIELD">Education Field</option>
		  		<option value="GRADUATION_YEAR">Graduation Year</option>
		  		<option value="ACADEMIC_GRADE">Academic Grade</option>
		  		
		  		</select>
		  		
		  		
		  		
		  		<div class="input-append">
				  <input class="input-xlarge" id="filter_keyword" type="text" placeholder="Your Keyword">
				  <button class="btn btn-primary" id="filter_button"><i class='icon-sort-down'></i>&nbsp;Filter!</button>
				</div>
				
			  
			</form>
			
		   </div>
		   
		   <a href='javascript:void' class='pull-right btn btn-inverse' style='display:none' id='showAll'>SHOW ALL RECORDS</a>
		   <br/><br/>
		   <div id="filter_result">
			   
			   
		   </div>
		   
			<div id='retrieved-data'>
	<!-- 
	this is where data will be  shown-->
	
   			 <img src="images/ajax-loader.gif" />
   			 </div>
		  
		  </div>
		  
		  
		  <div class="tab-pane" id="stat">
		  <br/>
			<h3>Statistics and Numbers</h3>
			 <?php
			 $st_qry=mysql_query("SELECT PROVINCE,EDUCATION_LEVEL,COUNT(NAME) FROM tblteachers GROUP BY PROVINCE,EDUCATION_LEVEL");
			 $st_qry_1=mysql_query("SELECT PROVINCE,ACADEMIC_GRADE,COUNT(NAME) FROM tblteachers WHERE PROVINCE IS NOT NULL GROUP BY PROVINCE,ACADEMIC_GRADE");
			 
			 echo "<table class='table pull-left' style='width:40%'>";
			 echo "<tr><th>Province</th><th>Degree</th><th>Count Education Level</th></tr>";
			 while($st_row=mysql_fetch_array($st_qry)){
			 echo "<tr>";
			 echo "<td>" . $st_row['PROVINCE'] . "</td><td>" . $st_row['EDUCATION_LEVEL'] . "</td><td>" . $st_row[2] . "</td>";
			 
			 echo "</tr>";
			 }
			 echo "</table>";
			 echo "<table class='table pull-right' style='width:40%'>";
			 echo "<tr><th>Academic Grade</th><th>Count Academic Grade</th></tr>";
			 while($st_row_1=mysql_fetch_array($st_qry_1)){
			 echo "<tr>";
			 echo "<td>" . $st_row_1['PROVINCE'] . "</td><td>" . $st_row_1['ACADEMIC_GRADE'] . "</td><td>" . $st_row_1[2] . "</td>";
			 echo "</tr>";
			 }
			 echo "</table>";
			 ?>
		  </div>
		  
		  <div class="tab-pane" id="charts">
		  <br/>
		  
 
			<h3>Charts</h3>
			<div class="tab-pane charts" id="charts">Charts Content</div>
			</div>
		  
		</div>


	<!--/Content-->
	
    </div>
	
	
	<div class="span3 well">
      <ul class="nav nav-list"> 
		  <li class="nav-header">Login Details</li>        
		  <li class="disabled"><a href="javascript:void"><i class="icon-signin"></i> Last Login:<?php echo date("F j, Y, g:i a");?></a></li>
          <li class="disabled"><a href="javascript:void"><i class="icon-user"></i> Your are logged in as:<?php echo "Data Entry";?></a></li>
		  <li class="divider"></li>
		   <li class="nav-header">User Panel</li> 
          
		  <li><a href="settings.php"><i class="icon-cog"></i> Settings</a></li>
		  <li><a href="controller/logout.php"><i class="icon-off"></i> Logout</a></li>
		</ul>
    </div>
  </div>
  <hr/>
  <footer class="footer">
  &copy;2013 TMIS, TED, MoE
  </footer>
</div>

</body>

</html>